<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="fdfxtrbForm" class="demo-form-inline">

        <el-form-item label="字段描述:">
          <el-input
            v-model="targetFieldName"
            placeholder="请输入字段描述"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="日期:">
          <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white grid-content">
      <!-- <div style="overflow: hidden; ">
        <div class="mytitle">分队分系统日报</div>
      </div> -->
      <!-- 表格 -->
      <el-table :data="tableData" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border>
        <el-table-column v-if="show" type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <!-- <el-table-column align="center" prop="sjkid" label="数据库id" width="100px">
        </el-table-column> -->

        <el-table-column align="center" prop="sjkmc" label="数据库名称">
          </el-table-column>
          <!-- <el-table-column align="center" prop="sjbid" label="数据表id">
          </el-table-column> -->
          
          <el-table-column align="center" prop="sjbmc" label="数据表名称">
          </el-table-column>
          <el-table-column align="center" prop="zdbt" label="字段名称">
          </el-table-column>
          <el-table-column align="center" prop="zdmc" label="字段标题">
          </el-table-column>
          <el-table-column align="center" prop="score" label="相关度">
          </el-table-column>
          <el-table-column align="center" prop="zdlx" label="字段类型">
          </el-table-column>
          <el-table-column align="center" prop="cd" label="长度">
          </el-table-column>

          <el-table-column align="center" prop="jd" label="经度">
          </el-table-column>
          <el-table-column align="center" prop="dw" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="zj" label="主键">
          </el-table-column>
          <el-table-column align="center" prop="wj" label="外键">
          </el-table-column>
          <el-table-column align="center" prop="fk" label="非空">
          </el-table-column>

          <el-table-column align="center" prop="jys" label="键约束">
          </el-table-column>
          <el-table-column align="center" prop="txgd" label="填写规定">
          </el-table-column>
          <!-- <el-table-column align="center" prop="zdz" label="最大值">
          </el-table-column>
          <el-table-column align="center" prop="zxz" label="最小值">
          </el-table-column>
          <el-table-column align="center" prop="jsgs" label="计算公式">
          </el-table-column>

          <el-table-column align="center" prop="fxlx" label="分析类型">
          </el-table-column>
          <el-table-column align="center" prop="dbgz" label="对比规则">
          </el-table-column>
          <el-table-column align="center" prop="ycfxgz" label="异常分析规则">
          </el-table-column>
          <el-table-column align="center" prop="ycbzid" label="异常标准id">
          </el-table-column>
          <el-table-column align="center" prop="yyms" label="语义描述">
          </el-table-column>

          <el-table-column align="center" prop="bz" label="备注">
          </el-table-column>
          <el-table-column align="center" prop="zyqJs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="zyqJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zyqSh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="zyqHj" label="合计">
          </el-table-column> -->

      </el-table>
      <!-- 分页器 -->
      <el-pagination align='right'
          background
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="pageNo"
          :page-sizes="[5,10, 20, 30, 40, 50]" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import sjccApi from '@/api/dtbb/dtbb';

export default {
  data() {
    return {
      show:false,//隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量          
      currentPage: 1,//当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      searchDate:"",
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      //excel数据
      excelData:[],
      approveStatus:'',
      fdfxtrbForm:{},
      targetFieldName:'',
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted(){

      this.search();
  },
  methods: {
      /**
      * 查询列表
      */
      async search() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
          // let res = await fdfxtApi.getFdfxtList(this.pageNo,this.pageSize,this.approveStatus,this.searchDate[0],this.searchDate[1]);
          let res = await sjccApi.getList({pageNo:this.pageNo,pageSize:this.pageSize,targetFieldName:this.targetFieldName});
          //判断是否成功
          if(res.success){
              console.log(res.data);
              //赋值
              this.tableData = res.data.records;
              //总数量
              this.total = res.data.total;
          }
      },
      //条件查询
      formSearch(){
          // console.log(this.searchDate);
          this.search();
          
      },
      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
          console.log(size);
          this.pageSize = size;
          //将每页显示的数量交给成员变量
          this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
          console.log(page);
          this.pageNo = page;
          //调用查询方法
          this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod (index) {
          // index默认在0开始，这里+1
          return index + 1 + (this.pageNo - 1) * this.pageSize
      },
  },
  
};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>